<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>

</head>
<body>

<div id="div1" >
    <div>{{func1()}}</div>
    <div>{{func1()}}</div>
    <div>{{sumTotal}}</div>
    <div>{{sumTotal}}</div>
</div>
<script>

    /*
    *   总结：
    *       方法会执行2次
    *     computed：
    *           第一次获取会调用方法计算
    *           第二次会直接走上一次的缓存
    * */


    const vueObj = new Vue({
        el: '#div1',
        data: {
            msg: "haha",
            number1: 10,
            number2: 10,
            number3: 10,


        },
        methods: {
            func1: function () {
                console.log("func1...run....");
                return this.msg.toLocaleUpperCase();
            },
        },
        computed:{
            sumTotal: function () {
                console.log("sumTotal...run...");
                const sum = this.number1 + this.number2 + this.number3
                return sum;
            },
        }

    });
</script>
</body>
</html>